<script setup> 
import { onMounted, ref } from 'vue'
import AddOrUpdate from './componets/addOrUpdate.vue'
import Delete from './componets/delete.vue'
import { getCategoryListApi } from '@/api/category'
import { getAllSpuApi } from '@/api/spu'


const spuList = ref([])
const page = ref(1)
const pageSize = ref(10)
const totalSize = ref(0)
const categoryList = ref([])
const value = ref([])
const deleteRef = ref('deleteRef')
const addOrUpdateRef = ref('addOrUpdateRef')
const searchForm = ref({
    title:'',
    categoryId3:'',
})

// 分页相关变量
const currentPage = ref(1)
const small = ref(false)
const disabled = ref(false)
const background = ref(true)



const handleDelete = (row)=>{
  deleteRef.value.deleteById(row.id)
}
const handleEdit = (row)=>{
  addOrUpdateRef.value.dialogFormVisible = true
  addOrUpdateRef.value.title = '修改商品'
  addOrUpdateRef.value.reset()
  addOrUpdateRef.value.spuList = JSON.parse(JSON.stringify(row))
}
const getPage = async ()=>{
    const result = await getAllSpuApi(page.value,pageSize.value,searchForm.value.title,searchForm.value.categoryId3)
    spuList.value = result.data.rows
    totalSize.value = result.data.total
}

const handleSizeChange = (val) => {
  pageSize.value = val
  page.value = 1
  getPage()
}
const handleCurrentChange = (val) => {
  page.value = val
  currentPage.value = val
  getPage()
}
const handleChange = (val) => {
    // 将级联选择器的值赋给 supplierForm.pcdId
    // val 是一个数组，通常取最后一个值作为选中的ID
    if (val && val.length > 0) {
      searchForm.value.categoryId3 = val[val.length - 1]
    } else {
      searchForm.value.categoryId3 = ''
    }
}
const addCategory = ()=>{
    addOrUpdateRef.value.dialogFormVisible = true
    addOrUpdateRef.value.title = '添加商品'
    addOrUpdateRef.value.reset()
}

// 重置搜索条件
const reset = () => {
  searchForm.value.title = ''
  searchForm.value.categoryId3 = ''
  value.value = []
  getPage()
}

const getCategoryList = async () => {
    let res = await getCategoryListApi()
    categoryList.value = res.data
}

onMounted(()=>{
  getCategoryList()
  getPage()
})
</script>

<template> 
    <h3>商品列表</h3>
    <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 20px;">
      <el-button type="primary" @click="addCategory">添加</el-button>
      <el-form :inline="true" :model="searchForm" style="display: flex; flex-wrap: wrap; gap: 10px;">
        <el-form-item label="标题">
          <el-input v-model="searchForm.title" placeholder="请输入" clearable style="width: 200px;" />
        </el-form-item>
        <el-form-item label="所属分类">
          <el-cascader 
            v-model="value" 
            :options="categoryList" 
            @change="handleChange" 
            clearable
            style="width: 200px;" 
            placeholder="请选择" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getPage">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>


  <el-table
      :data="spuList"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
    >
     <el-table-column type="index" label="序号" width="60" />
     <el-table-column prop="title" width="120" label="标题" sortable />
     <el-table-column prop="subTitle" width="150" label="副标题"  />
     <el-table-column prop="description" width="200" label="商品描述"  />
     <el-table-column prop="content" width="200" label="商品详情"  />
     <el-table-column prop="categoryName" width="120" label="商品分类" />
     <el-table-column prop="supplierName" width="120" label="供应商" />
     <el-table-column prop="price" width="100" label="单价"  />
     <el-table-column prop="realPrice" width="100" label="真实价格"  />
     <el-table-column prop="code" width="150" label="商品条码"  />
     <el-table-column prop="unit" width="100" label="商品单位"  />
     <el-table-column prop="productWeight" width="100" label="商品重量"  />
     <el-table-column prop="productLength" width="100" label="商品长度"  />
     <el-table-column prop="productWidth" width="100" label="商品宽度"  />
     <el-table-column prop="productHeight" width="100" label="商品高度"  />
     <el-table-column prop="productVolume" width="100" label="商品体积"  />
     <el-table-column fixed="right" label="操作" width="180">
      <template #default="scope">
        <div style="text-align: center; display: flex; justify-content: center; gap: 5px; flex-wrap: nowrap;">
          <el-button v-if="scope.row.title != null" type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button v-if="scope.row.title != null" type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
          <!-- <el-button v-if="scope.row.price != null" type="success" size="small" @click="handleShow(scope.row)">查看</el-button> -->
        </div>
      </template>
    </el-table-column>
  </el-table>

    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="display: flex; justify-content: flex-end;"
      />
    <AddOrUpdate ref="addOrUpdateRef" @refresh="getPage" />
    <Delete ref="deleteRef" @refresh="getPage" />
</template>